<template>
  <div class="password">
    <!-- 头部 -->
    <div class="head"> <img
          src="https://img.axureshop.com/ee/00/de/ee00de2201bf478bb4a9d4f881afd706/images/考勤签到/u746.png"
          @click="returnPage" />
        <span
          style="font-size: 20px;font-family: '微软雅黑 Regular';font-weight: bold; margin-left: 5px;margin-right: 190px;">{{ title }}</span>
      </div>
    <!-- 主体 -->
    <div class="workspace">
      <van-cell title="当前手机号" value="189****5656" />
      <div class="capcha">
        <CaptchaInput />

      <div class="send">
        <button
          :disabled="isCounting"
          @click="startCountdown"
          v-if="!isCounting"
        >
          发送验证码
        </button>
        <button :disabled="isCounting" v-else >
          再次发送 ({{ countdown }})
        </button>
      </div>
      </div>
      <div class="go">
        <van-button type="primary" block to="pswd">下一步</van-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref, watch } from 'vue';


import CaptchaInput from "../../componets/CaptchaInput.vue";

// 设置页面标题
const title = "用户验证";

const router = useRouter();

const returnPage = () => {
  router.replace('/my');
};
const countdown = ref(0);
const isCounting = ref(false);

const startCountdown = () => {
  if (!isCounting.value) {
    isCounting.value = true;
    countdown.value = 60; // 设置倒计时初始值

    const timer = setInterval(() => {
      countdown.value--;
      if (countdown.value === 0) {
        clearInterval(timer);
        isCounting.value = false;
      }
    }, 1000);
  }
};

watch(countdown, (newValue) => {
  if (newValue === 0) {
    // 倒计时结束后，可以执行一些其他操作
  }
});
</script>
<style lang="scss" scoped>
:deep(.go) {
  margin-top: 59vh;
  width: 94vw;
  margin-left: 3vw;
}
.capcha {
  margin-top: 1vh;
  margin-left: 8vw;
}
.send {
 button{
    padding: 1vw 1vh;
  border: none;
  background-color: #fff;
  font-size: 14px;
  color: rgba(99, 94, 232, 0.748);
  margin-top: 2vh;
 }
}
.van-cell {
  height: 8vh;
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
  font-weight: bold; /* 加粗 */
  color: rgb(103, 99, 99); /* 灰色 */
}
.head {
    display: flex;
    height: 40px;
    align-items: center;
    margin-top: 10px;
    padding-left: 5px;
    margin-bottom: 0px;
  }

</style>
